<template>
  <div>
    <!-- 搜索区域 -->
    <div>
      <el-input
        placeholder="订单编号"
        v-model="searchOrderNo"
        style="margin-right: 30px; width: 200px"
      ></el-input>
      <el-input
        placeholder="用户名"
        v-model="searchUsername"
        style="margin-right: 10px; width: 200px"
      ></el-input>
      <el-button type="primary" @click="fetchOrders">查询</el-button>
      <el-button
        type="danger"
        @click="deleteSelectedOrders"
        :disabled="!hasSelectedOrders"
        >删除选中</el-button
      >
    </div>
    <!-- 订单表格 -->
    <el-table
      ref="orderTable"
      :data="orders"
      style="width: 100%; margin-top: 30px"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="orderId" label="订单编号"></el-table-column>
      <el-table-column label="书名">
        <template slot-scope="scope">
          {{ scope.row.orderItems[0].bookName || "未知" }}
          <!-- 假设第一个书名代表订单 -->
        </template>
      </el-table-column>

      <el-table-column prop="totalQuantity" label="数量">
        <template slot-scope="scope">
          {{ getOrderTotalQuantity(scope.row) }}
        </template>
      </el-table-column>
      <el-table-column prop="username" label="用户名"></el-table-column>
      <el-table-column prop="address" label="收货地址"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="deleteOrder(scope.row.orderId)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import API from "../../api/API";

export default {
  data() {
    return {
      searchOrderNo: "",
      searchUsername: "",
      orders: [],
      selectedOrders: [], // 用于存储选中的订单
    };
  },
  mounted() {
    API.getOrders()
      .then((response) => {
        this.orders = response.data.data;
        console.log("create");
        // console.log(this.images[0].imageUrl);
      })
      .catch((error) => {
        console.error("Error fetching categories:", error);
      });
  },
  methods: {
    fetchOrders() {
      // 这里需要根据实际API接口调整
      //   API.getOrder()
      //     .then((response) => {
      //       if (response.data.status === "success") {
      //         this.orders = response.data.data.map(this.enrichOrderData);
      //       } else {
      //         console.error("获取订单失败:", response.data.message);
      //       }
      //     })
      //     .catch((error) => {
      //       console.error("请求错误:", error);
      //     });
    },
    deleteSelectedOrders() {
      // 实现删除多个订单的逻辑
      if (this.selectedOrders.length) {
        // 调用API删除
        // ...
        this.fetchOrders(); // 删除后刷新数据
      }
    },
    handleSelectionChange(selection) {
      this.selectedOrders = selection;
    },
    deleteOrder(orderId) {
      // 实现删除单个订单的逻辑
      // ...
      this.fetchOrders(); // 删除后刷新数据
    },
    getOrderTotalQuantity(order) {
      return order.orderItems.reduce((sum, item) => sum + item.quantity, 0);
    },
    enrichOrderData(order) {
      // 假设存在一个获取书名的方法，这里简化处理
      order.username = "用户名示例"; // 实际应从用户信息中获取
      order.address = "收货地址示例"; // 同上
      // 假定coverImageURL可以从orderItems的第一本书获取
      order.coverImageURL = order.orderItems[0]
        ? order.orderItems[0].coverImageURL
        : "";
      return order;
    },
    hasSelectedOrders() {
      return this.selectedOrders.length > 0;
    },
  },
  created() {
    this.fetchOrders(); // 页面加载时自动获取订单数据
  },
};
</script>

<style>
.search-container {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
</style>
